<template lang="html">
    <div class="">
        <button type="button" name="button" @click="change(1)">1号子组件</button>
        <button type="button" name="button" @click="change(2)">2号子组件</button>
        <div :is="childComponent"></div>
    </div>
</template>

<script>
import ChildComponent1 from '@/base/child1'
import ChildComponent2 from '@/base/child2'
export default {
	data() {
		return {
			childComponent: ''
		}
	},
	components: {
		ChildComponent1,
		ChildComponent2
	},
	methods: {
		change(index) {
			if (index == 1) {
				this.childComponent = 'child-component1'
			} else {
				this.childComponent = 'child-component2'
			}
		}
	}
}
</script>

<style lang="css">
</style>
